<template>
    <div class="container">
        <a-tree-select
            v-model:value="treeValue"
            style="width: 100%"
            :tree-data="treeData"
            :treeCheckable="treeCheckable"
            allow-clear
            :show-checked-strategy="'SHOW_PARENT'"
            :dropdownClassName="'yl-treeselect'"
            :placeholder="t('yl.pleaseSelect')"
        />
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, watch, reactive, toRefs } from 'vue';
import useDepts, { useDeptsTree } from '@/hooks/useDepts';

import { useI18n } from 'vue-i18n';

export default defineComponent({
    name: 'treeselect',
    props: {
        value: {
            type: [Array, String, Number],
            default: () => [],
        },
        treeCheckable: {
            type: Boolean,
            default: () => true,
        },
    },

    setup(props, { emit }) {
        console.log(props);
        const { t } = useI18n();
        const { value } = props;

        const state = reactive({
            treeValue: value,
            treeData: [] as TreeDataItem[],
        });

        onMounted(() => {
            handleInitDepts();
        });

        // 获取所有部门
        const handleInitDepts = async () => {
            const { list } = await useDeptsTree();
            if (list && !list.length) return;

            state.treeData = TreeFun(list);
        };
        // 递归改树形结构数据
        const TreeFun = (list: any) => {
            let TreeList = list.map((item: any) => {
                return {
                    title: item.label,
                    key: item.id,
                    value: item.id,
                    disabled: !item.enabled,
                    isLeaf: item.leaf,
                    children: item.children && item.children.length ? TreeFun(item.children) : [],
                };
            });
            return TreeList;
        };

        // 更新值
        watch(
            () => state.treeValue,
            (newValue) => {
                emit('update:value', newValue);
            }
        );
        // 异步加载树节点
        const onLoadData = (treeNode: { [x: string]: any }) => {
            return new Promise(async (resolve: (value?: unknown) => void) => {
                const { key } = treeNode.dataRef;
                const params = {
                    pid: key,
                };
                let { list } = await useDepts(params);
                if (!list.length) {
                    return resolve();
                }
                list = list.map((item) => {
                    return {
                        title: item.label,
                        key: item.id,
                        value: item.id,
                        disabled: !item.enabled,
                        isLeaf: item.leaf,
                        pId: key,
                    };
                });
                treeNode.dataRef.children = list;
                resolve();
            });
        };

        return {
            ...toRefs(state),
            onLoadData,
            TreeFun,
            t,
        };
    },
});
</script>

<style lang="scss" scoped></style>
<style>
.yl-treeselect {
    max-height: 400px !important;
}
</style>
